<template>
  <div class="property-where-house-con table-gl-w">
    <div style="width: 100%; background-color: white; padding: 5px 10px">
      <a-row style="margin: 0" :gutter="8">
        <a-col :span="4">
          <div>
            <a-select @change="search($event, '属性状态')" :style="{ width: '100%' }" placeholder="属性状态" v-model="searchValue.status" allow-clear>
              <!-- <a-option v-for="item of properStatus" :key="item.value" :label="item.label" :value="item.value"></a-option> -->
              <a-option value="0">停用</a-option>
              <a-option value="1">启用</a-option>
            </a-select>
          </div>
        </a-col>
        <a-col :span="4">
          <div>
            <a-select @change="search($event, '属性来源')" :style="{ width: '100%' }" placeholder="属性来源" v-model="searchValue.source" allow-clear>
              <!-- <a-option v-for="item of properSource" :key="item.value" :label="item.label" :value="item.value"></a-option> -->
              <a-option value="system">系统</a-option>
              <a-option value="custom">自定义</a-option>
            </a-select>
          </div>
        </a-col>
        <a-col :span="4">
          <div>
            <SearchItem :options="dataOptions" @search="search" ref="SearchItem" />
          </div>
        </a-col>
      </a-row>
      <ShowSearchItem :list="showTagList" @del="delTag" />
    </div>

    <div class="table-gl-con">
      <TableWrap style="flex: 1" @refresh="getList">
        <template #headerLeft>
          <a-button type="primary" size="medium" class="btn" style="margin-right: 10px" @click="show('add')">添加</a-button>
          <a-button size="medium" class="gray-outline" style="margin-right: 10px" @click="changeStaus(true)">启用</a-button>
          <a-button size="medium" class="gray-outline" style="margin-right: 10px" @click="changeStaus(false)">禁用</a-button>
          <a-button size="medium" class="gray-outline" style="margin-right: 10px" @click="groupEl.visible = true">属性分组</a-button>
          <!-- <a-button size="medium" class="gray-outline" style="margin-right: 10px" @click="showImportPairDialog = true">导入</a-button> -->
        </template>
        <template #tableBody>
          <a-table class="table-singe-line show-border-table" size="mini" :loading="loading" ref="table" :scroll="{ y: '100%' }" @selection-change="selectColumn" row-key="id" :columns="columns" :data="data" :row-selection="rowSelection" :pagination="false">
            <template #columns>
              <a-table-column v-for="item of columns" :align="item.align" :width="item.width" :title="item.title" :data-index="item.dataIndex">
                <template v-if="item.title === '属性类型'" #cell="{ record }">
                  <span>{{ typeOptions.find((e) => e.value == record.type).label }}</span>
                </template>
                <template v-else-if="item.title === '属性来源'" #cell="{ record }">
                  <span>{{ record.source == 'custom' ? '自定义' : '系统' }}</span>
                </template>
                <template v-else-if="item.title === '状态'" #cell="{ record }">
                  <a-switch v-model="record.status" @change="changeStaus($event, record)" />
                </template>
                <template v-else-if="item.title === '属性值'" #cell="{ record }">
                  <a-popover>
                    <span class="text-limit" style="display: inline-block; width: 150px">{{ propertyText(record) }}</span>
                    <template #content>
                      <span>{{ propertyText(record) }}</span>
                    </template>
                  </a-popover>
                </template>
                <template v-else-if="item.title === '创建时间'" #cell="{ record }">
                  {{ $setTime(record.gmtCreate) }}
                </template>
                <template v-else-if="item.title === '操作'" #cell="{ record }">
                  <a-button type="text" @click="show('edit', record)">编辑</a-button>
                  <a-button type="text" style="color: red; margin-left: 10px" @click="del(record)">删除</a-button>
                </template>
              </a-table-column>
            </template>
          </a-table>
        </template>
      </TableWrap>
      <div class="pagination-footer">
        <a-pagination size="mini" :page-size-options="[20, 50, 100, 200, 500]" show-total show-page-size :total="pageNation.total" :default-page-size="pageNation.pageSize" :current="pageNation.pageNum" style="float: right" @page-size-change="sizeChange" @change="changePage" />
      </div>
    </div>
  </div>
  <Detail ref="modelEl" :detail="detail" @save="getList" />
  <Group ref="groupEl" />
  <ImportProperty v-if="showImportPairDialog" :isShow="showImportPairDialog" @closed="showImportPairDialog = false" @success="sizeChange(20)" />
</template>

<script lang="ts">
  import { defineComponent, reactive, ref } from 'vue'
  import SearchItem from './searchItem.vue'
  import ShowSearchItem from '@/components/showSearchItem.vue'
  import TableWrap from '@/components/TableWrap.vue'
  import Detail from './detail.vue'
  import Group from './group.vue'
  import _ from 'lodash-es'
  import { getRelatedList, updateRelatedListStatus, deleteRelatedList } from '@/api/product'
  import { Message, Modal } from '@arco-design/web-vue'
  import ImportProperty from './importProperty.vue'
  const typeOptions: any = [
    { label: '单选', value: 1 },
    { label: '多选', value: 2 },
    { label: '是/否', value: 3 },
    { label: '文本', value: 4 },
    { label: '数字(整数)', value: 5 },
    { label: '数字(小数)', value: 6 },
    { label: '三维', value: 7 },
    { label: '二维', value: 8 },
  ]
  const dataOptions = [
    {
      label: '属性中文名称',
      value: 'nameList',
    },
    {
      label: '属性英文名称',
      value: 'nameEnList',
    },
    {
      label: '编码',
      value: 'codeList',
    },
  ]
  export default defineComponent({
    name: 'PropertyWhereHouse',
    components: {
      SearchItem,
      ShowSearchItem,
      Detail,
      Group,
      TableWrap,
      ImportProperty,
    },
    setup() {
      const searchValue = reactive({ status: '', source: '', nameList: [], nameEnList: [], codeList: [] }) as any
      const showTagList: any = reactive([])
      const loading = ref(false)
      const showImportPairDialog = ref(false)
      const SearchItem = ref()
      const detail = ref({ type: '', data: {} })
      const modelEl = ref()
      const groupEl = ref()
      const table = ref()
      const columns: any = [
        {
          title: '编码',
          dataIndex: 'code',
          align: 'left',
          width: 150,
        },
        {
          title: '属性中文名称',
          dataIndex: 'name',
          align: 'left',
          width: 110,
        },
        {
          title: '属性英文名称',
          dataIndex: 'nameEn',
          align: 'left',
          width: 110,
        },
        {
          title: '属性类型',
          dataIndex: 'type',
          align: 'left',
          width: 150,
        },
        {
          title: '属性来源',
          dataIndex: 'source',
          align: 'left',
          width: 150,
        },
        {
          title: '属性值',
          dataIndex: 'propValue',
          align: 'left',
          width: 350,
        },
        {
          title: '分组',
          dataIndex: 'propGroupName',
          align: 'left',
          width: 150,
        },
        {
          title: '状态',
          dataIndex: 'status',
          align: 'status',
          width: 80,
        },
        {
          title: '创建人',
          dataIndex: 'createUname',
          align: 'left',
          width: 80,
        },
        {
          title: '创建时间',
          dataIndex: 'gmtCreate',
          align: 'left',
          width: 160,
        },
        {
          title: '操作',
          dataIndex: 'email',
          align: 'left',
          width: 160,
        },
      ]
      const data = ref([])
      let selectRow = reactive([])
      let pageNation = reactive({ total: 30, pageSize: 20, pageNum: 1 })
      const rowSelection = reactive({
        type: 'checkbox',
        showCheckedAll: true,
        onlyCurrent: false,
      }) as any
      const search = (val: any, text: string) => {
        if (val instanceof Object) {
          val.sort = 3
          showTagList.forEach((e: any, i: any) => {
            if (e.label == '属性中文名称' || e.label == '属性英文名称' || e.label == '编码') {
              showTagList.splice(i, 1)
            }
          })
          showTagList.push(_.cloneDeep(val))
          searchValue.nameList = []
          searchValue.nameEnList = []
          searchValue.codeList = []
          searchValue[val.code] = val.value
          // }
          getList()
          return
        }
        if (text == '属性状态') {
          let obj: any = {}
          obj.label = text
          obj.value = Number(val) ? '启用' : '停用'
          obj.labelCode = 'status'
          obj.sort = 1
          let index = showTagList.findIndex((el: any) => el.label == text)
          if (index != -1) {
            showTagList[index] = obj
          } else {
            showTagList.push(obj)
          }
          if (val == '') showTagList.splice(index, 1)
        } else {
          let obj: any = {}
          obj.label = text
          obj.value = Number(val) ? '自定义' : '系统'
          obj.labelCode = 'source'
          obj.sort = 2
          let index = showTagList.findIndex((el: any) => el.label == text)
          if (index != -1) {
            showTagList[index] = obj
          } else {
            showTagList.push(obj)
          }
          if (val == '') showTagList.splice(index, 1)
        }

        getList()
      }

      const delTag = (data: any) => {
        let index = showTagList.findIndex((el: any) => el.label == data.label)
        showTagList.splice(index, 1)
        console.log(showTagList)
        searchValue[data.labelCode] = ''
        SearchItem.value.selInfo.value = ''
        getList()
      }

      const selectColumn = (val: any) => {
        selectRow = val
      }

      const changePage = (val: number) => {
        pageNation.pageNum = val
        getList()
      }

      const sizeChange = (val: number) => {
        pageNation.pageNum = 1
        pageNation.pageSize = val
        getList()
      }

      const del = (data: any) => {
        let params = {
          idList: new Array(data.id),
        }
        Modal.error({
          title: '删除确认',
          content: '信息删除后无法恢复，确定要删除吗？',
          titleAlign: 'start',
          cancelText: '取消',
          hideCancel: false,
          onBeforeOk: async (done) => {
            const res: any = await deleteRelatedList(params)
            if (res.code == 'SUCCESS') {
              done(true)
              Message.success('删除成功')
              getList()
            }
          },
        })
      }

      const show = (type: string, data?: any) => {
        detail.value.type = type
        data ? (detail.value.data = data) : (detail.value.data = {})
        modelEl.value.visible = true
      }

      const getList = async () => {
        let params = {
          ...searchValue,
          pageNum: pageNation.pageNum,
          pageSize: pageNation.pageSize,
        }
        loading.value = true

        const res: any = await getRelatedList(params)
        if (res.code == 'SUCCESS') {
          pageNation.total = res.data.total
          data.value = res.data.records
        }
        loading.value = false
      }

      // 修改状态
      const changeStaus = async (val: any, data?: any) => {
        let params: any = {
          status: val,
        }
        if (data) {
          params.idList = new Array(data.id)
        } else {
          if (selectRow.length <= 0) {
            return Message.error('请选择数据')
          }
          params.idList = selectRow
        }

        const res: any = await updateRelatedListStatus(params)
        if ((res.code = 'SUCCESS')) {
          Message.success('修改成功')
        }
        if (!data) {
          getList()
          selectRow.forEach((e) => {
            table.value.select(e, false)
          })
        }
      }

      const propertyText = (data: any) => {
        if (data.type == 1 || data.type == 2) {
          return data.propValueList.map((e: any) => e.propValue).join(',')
        } else {
          return ''
        }
      }

      getList()

      return {
        propertyText,
        typeOptions,
        loading,
        searchValue,
        search,
        dataOptions,
        showTagList,
        delTag,
        SearchItem,
        columns,
        data,
        pageNation,
        rowSelection,
        selectColumn,
        changePage,
        sizeChange,
        detail,
        show,
        modelEl,
        groupEl,
        getList,
        changeStaus,
        table,
        del,
        showImportPairDialog,
      }
    },
  })
</script>

<style lang="less" scoped>
  .property-where-house-con {
    height: calc(100vh - @menuAndTabHeight);
    width: 100%;
    // margin: 0 10px;
    box-sizing: border-box;
    .table {
      // width: 100%;
      // border-radius: 10px;
      background: white;
      // margin-top: 10px;
      padding-bottom: 10px;
      .top {
        height: 40px;
        line-height: 40px;
        // padding: 0 10px;
        box-sizing: border-box;
        border-bottom: 1px solid #ddd;
      }
    }
  }
</style>
